// src/App.tsx
// 引入 React 库，特别引入 useEffect 钩子函数，用于处理副作用操作
import React, { useEffect } from'react';
// 引入自定义的路由视图组件，用于处理页面路由相关逻辑
import RouterView from './router/routerView';
// 引入文字转语音组件
import TextToSpeech from './components/TextToSpeech';
// 引入语音转文字组件
import SpeechToText from './components/SpeechToText';
// 引入 autofit.js 库，用于实现自动适配相关功能
import autofit from 'autofit.js';
// 引入全局样式文件，用于设置整个应用的样式
import './App.css'; 
import VoiceControlPanel from "./components/VoiceControlPanel"
import styles from './style.module.css'
import MaleVoiceComponent from './components/MaleVoiceComponent';

// 定义 App 组件，它是一个函数式组件，类型为 React.FC（函数式组件的类型别名）
const App: React.FC = () => {
    // useEffect钩子函数，在组件挂载后执行，可用于执行一些初始化操作等副作用
    useEffect(() => {
        // 初始化 autofit.js，设置相关配置
        autofit.init({
            // 设置参考宽度为 1920
            dw: 1920,
            // 设置参考高度为 1080
            dh: 1080,
            // 设置要应用自动适配的元素的选择器，这里选择 id 为 root 的元素
            el: '#root',
            // 开启自动适配功能，当窗口大小变化时重新适配
            resize: true
        });
    }, []); // 第二个参数为空数组，表示该 useEffect 只在组件挂载时执行一次

    return (
        // 应用的根容器，添加了 app-content 类名，用于样式设置
        <div className="app-content">
            {/* 渲染路由视图组件，用于处理页面路由跳转和展示 */}
            <RouterView />

            {/* 用于包含各个功能模块的容器，添加了 sections 类名 */}
            <div className="sections">
                {/* 以下是被注释掉的代码块，原本可能用于展示科大讯飞 API 集成示例的相关内容 */}
                {/* <section>
                    <h1>科大讯飞 API 集成示例</h1>
                </section>
                <section>
                    <h2>文字转语音</h2>
                    <TextToSpeech />
                </section>
                <section>
                    <h2>语音转文字</h2>
                    <SpeechToText />
                </section> */}
            </div>
             <VoiceControlPanel />
             
        </div>
    );
};

// 导出 App 组件，以便在其他文件中使用
export default App;